<template>
    <div class="photo-album-box">
      <div class="photo-album-date flex-row-start">
        <i class="el-icon-date"></i>
        <div style="margin-left: 5px">{{ value.date }}</div>
      </div>
      <div class="photo-album-container">
        <YImage v-for="(item,index) in value.pictureList" :pre-src-list="preSrcList" :src="item.url"
                class="photo-album-img"></YImage>
      </div>
    </div>
</template>

<script>
    import YImage from "@/components/image/YImage";
    export default {
        name: "PhotoAlbum",
        components: {YImage},
        props:{
          list: {
            type: Object,
            default: {
              date: "2022-10-14",
              pictureList: [
                "http://www.youlibin.top:8090/image/934453e.jpg.jpg"
              ]
            }

          }
        },
      data() {
        return {
          value: this.$props.list,
          preSrcList: []
        }
      },
      methods: {
        initPreSrcList(newV) {
          if (newV.pictureList) {
            for (let obj of newV.pictureList) {
              // this.preSrcList.push(obj.url)
            }
          }

        }
      },
      mounted() {
        this.initPreSrcList(this.$props.list)
      },
      watch: {
        list(newV) {
          this.value = newV
          this.initPreSrcList(newV)

        }
      }
    }
</script>

<style scoped lang="less">
    .photo-album-box{


      .photo-album-date {
        min-height: 20px;
      }

      .photo-album-container {
        min-height: 30px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .photo-album-img {
          min-width: 80px;
          min-height: 80px;
                max-width: 160px;
                max-height: 160px;
                flex: 1;
                overflow: hidden;
                margin:5px;
            }
        }
    }
</style>